<template>
  <div
    :id="id"
    :style="{
      width: width,
      height: height
    }"
    v-echart-resize
  ></div>
</template>

<script setup>
import { defineProps, onMounted, onUnmounted, ref, watch } from 'vue'
import * as echarts from 'echarts'
import { unwarp } from '@/utils/commUtils'

const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '100%'
  },
  value: {
    type: Object,
    default: () => {}
  }
})
const chart = ref(null)
const setOptions = (item) => {
  let series = []
  let pieDatas = []
  for (let index in item) {
    pieDatas.push({
      value: item[index].rate,
      name: item[index].equipment
    })
  }
  let maxRadius = 80
  let barWidth = 5
  let barGap = 5
  let sumValue = 0
  let showValue = true
  let showPercent = true
  pieDatas.map((item) => {
    sumValue += item.value
  })
  let barColor = [
    {
      color1: 'rgba(63, 206, 106, 1)',
      color2: 'rgba(63, 206, 106, .2)'
    },
    {
      color1: 'rgba(252, 169, 10, 1)',
      color2: 'rgba(252, 169, 10,.2)'
    },
    {
      color1: 'rgba(6, 123, 204, 1)',
      color2: 'rgba(6, 123, 204, .2)'
    },
    {
      color1: 'rgba(58, 187, 233, 1)',
      color2: 'rgba(58, 187, 233, .2)'
    },
    {
      color1: 'rgba(0, 191, 161, 1)',
      color2: 'rgba(0, 191, 161, .2)'
    },
    {
      color1: 'rgba(2, 191, 197, 1)',
      color2: 'rgba(2, 191, 197, .2)'
    },
    {
      color1: 'rgba(97, 207, 248, 1)',
      color2: 'rgba(97, 207, 248, .2)'
    }
  ]
  pieDatas.map((item, i) => {
    series.push({
      type: 'pie',
      // clockWise: false, //顺时加载
      hoverAnimation: false, //鼠标移入变大
      radius: [
        maxRadius - i * (barGap + barWidth) + '%',
        maxRadius - (i + 1) * barWidth - i * barGap + '%'
      ],
      center: ['40%', '45%'],
      label: {
        show: false
      },
      itemStyle: {
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        borderWidth: 5
      },
      data: [
        {
          value: item.value,
          name: item.name,
          itemStyle: {
            color: (barColor[i] && barColor[i].color1) || 'rgba(68,165,255,1)'
          }
        },
        {
          value: sumValue - item.value,
          name: '',
          itemStyle: {
            color: 'transparent'
          },
          tooltip: {
            show: false
          },
          hoverAnimation: false
        }
      ]
    })
    series.push({
      name: 'blank',
      type: 'pie',
      silent: true,
      z: 0,
      clockWise: false, //顺时加载
      hoverAnimation: false, //鼠标移入变大
      radius: [
        maxRadius - i * (barGap + barWidth) + '%',
        maxRadius - (i + 1) * barWidth - i * barGap + '%'
      ],
      center: ['40%', '45%'],
      label: {
        show: false
      },
      itemStyle: {
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        borderWidth: 5
      },
      data: [
        {
          value: 1,
          itemStyle: {
            // color: "rgba(255, 255, 255,.13)",
            color: (barColor[i] && barColor[i].color2) || 'rgba(68,165,255,1)',
            borderWidth: 0
          },
          tooltip: {
            show: false
          },
          hoverAnimation: false
        }
      ]
    })
  })
  const option = {
    height: '110%',
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0
    },
    tooltip: {
      show: true,
      // trigger: 'item'
      formatter: (name) => {
        return `${name.marker}${name.name}: ${name.value}%`
      }
    },
    legend: {
      show: true,
      right: '10%',
      top: 'middle',
      icon: 'circle',
      itemWidth: 15,
      itemHeight: 20,
      itemGap: 15,
      textStyle: {
        fontSize: 16
      },
      formatter: (name) => {
        var datas = pieDatas
        let total = 0
        datas.map((item) => {
          total += item.value - 0
        })
        let valueIndex = datas.map((item) => item.name).indexOf(name)

        return ' ' + ' ' + name + '  ' + datas[valueIndex].value + '%'
      }
    },
    series: series
  }
  unwarp(chart.value).setOption(option)
}

const initChart = () => {
  setTimeout(() => {
    if (!chart.value) {
      chart.value = echarts.init(document.getElementById(props.id))
    }
    setOptions()
  }, 0)
}

onMounted(() => {
  initChart()
})

onUnmounted(() => {
  if (!chart.value) {
    return
  }
  chart.value.dispose()
  chart.value = null
})

watch(
  () => props.value,
  () => {
    setOptions(props.value)
  }
)
</script>

<style lang="scss" scoped>
</style>
